// AIGeneratorPage.js
import React, { useState } from 'react';
import {Card, Alert, Typography, Button, Space, Divider, message} from 'antd';
import { RobotOutlined, SaveOutlined, CopyOutlined } from '@ant-design/icons';
import AIStepGenerator from './AIStepGenerator';

const { Title, Paragraph, Text } = Typography;

const AIGeneratorPage = () => {
    const [generatedSteps, setGeneratedSteps] = useState([]);

    const handleStepsGenerated = (steps) => {
        setGeneratedSteps(steps);
    };

    const copyToClipboard = () => {
        if (!generatedSteps.length) return;

        const stepsText = generatedSteps.map((step, index) => {
            return `步骤 ${index + 1}: ${step.name}\n${step.description}\n`;
        }).join('\n');

        navigator.clipboard.writeText(stepsText)
            .then(() => {
                message.success('步骤已复制到剪贴板');
            })
            .catch(() => {
                message.error('复制失败，请手动复制');
            });
    };

    return (
        <div>
            <Title level={2}>
                <RobotOutlined /> AI步骤生成工具
            </Title>

            <Paragraph>
                使用AI智能生成任务步骤，帮助您更高效地规划和执行任务。
                您可以输入任务需求，AI将为您生成详细的步骤列表。
            </Paragraph>

            <Alert
                message="使用提示"
                description="提供详细的任务需求描述可以帮助AI生成更准确的步骤。您可以在生成后进一步优化和调整步骤。"
                type="info"
                showIcon
                style={{ marginBottom: 24 }}
            />

            <Card>
                <AIStepGenerator
                    standalone={true}
                    onStepsGenerated={handleStepsGenerated}
                />
            </Card>

            {generatedSteps.length > 0 && (
                <Card style={{ marginTop: 24 }}>
                    <Title level={4}>生成结果</Title>
                    <Paragraph>
                        您可以复制这些步骤或在创建新任务时使用它们。
                    </Paragraph>

                    <Space>
                        <Button
                            icon={<CopyOutlined />}
                            onClick={copyToClipboard}
                        >
                            复制到剪贴板
                        </Button>
                        <Button
                            type="primary"
                            icon={<SaveOutlined />}
                            onClick={() => window.location.href = '/tasks/new'}
                        >
                            创建新任务并使用这些步骤
                        </Button>
                    </Space>
                </Card>
            )}
        </div>
    );
};

export default AIGeneratorPage;
